<script setup>

import moduleJson from "@/components/page/moduleJson"
import dataJson from "@/components/page/dataJson"
import {inject, onMounted,ref} from "vue";
import TaggingService from "@/service/impl/TaggingService.js";
import SentenceModel from "@/model/SentenceModel.js";


const t = inject('$t')
const message = inject('message')
const data = dataJson()
const module = moduleJson()
const sentenceModel = ref(new SentenceModel())
const classification = ref([])

onMounted(() => {
    module.value.page.show = true
    module.value.init(TaggingService.url.add, TaggingService.url.edit,
        TaggingService.url.del, null, null)
    module.value.operations.width = "200px"
    module.value.dialog.width = "40%"
    init()
})

const init = () => {
    module.value.dialog.show = false
    TaggingService.list(data.value.source()).then(res => {
        classification.value = res.data.classificationVO
        res.data = res.data.sentenceVO
        data.value.init(res)
    })
}

const editOpen = (data, index, type) => {
    module.value.dialog.load = false
    const fun = {
        0: () => {
            sentenceModel.value = new SentenceModel()
        },
        1: () => {
            sentenceModel.value = data
        }
    }
    fun[type]()
}

const editConfirm = (type) => {
    const fun = {
        0: (src) => {
            TaggingService.add(sentenceModel.value).then(res => {
                src()
            })
        },
        1: (src) => {
            TaggingService.edit(sentenceModel.value).then(res => {
                src()
            })
        }
    }
    fun[type](init)

}

const delConfirm = (obj) => {
    TaggingService.del(obj).then(res => {
        init()
    })
}

const classChange = (id) => {
    let item = classification.value.find(item => item.id === id)
    sentenceModel.value.taggings.length = 0
    sentenceModel.value.taggings.push(...item.keywords)
}


</script>
<template>
    <Page
        @refresh="init"
        :data="data"
        :module="module"
        @edit-open="editOpen"
        @edit-confirm="editConfirm"
        @del-confirm="delConfirm"
        @page-current-change="init"
        @page-size-change="init"
    >
        <template #table-left>
        </template>
        <template #operate-before>
            <el-select v-model="data.data.classificationId" style="width: 200px;margin-left: 15px" @change="init">
                <el-option
                    v-for="item in classification"
                    :key="item.id"
                    :label="item.className"
                    :value="item.id"
                />
            </el-select>
        </template>
        <template #table-column>
            <el-table-column prop="className" :label="$t('tagging.classification')" width="150"/>
            <el-table-column prop="sentence" :label="$t('tagging.sentence')" width="500" />
            <el-table-column :label="$t('tagging.info')" show-overflow-tooltip>
                <template #default="scope">
                    {{ scope.row.taggings.filter(item => item.tagging !== null && item.tagging !== '')
                    .map(item => item.keyword + "->" + item?.tagging).join('; ') }}
                </template>
            </el-table-column>
        </template>
        <template #after-table-event="row">
        </template>
        <template #table-dialog>
            <el-form :rules="sentenceModel.rules" :label-width="100" :label-position="'left'" :model="sentenceModel" style="width: 100%;padding: 5px">
                <el-form-item :label="$t('tagging.sentence')" prop="sentence">
                    <el-input v-model="sentenceModel.sentence" autocomplete="off"/>
                </el-form-item>
                <el-form-item :label="$t('tagging.classification')" prop="classificationId">
                    <el-select
                        v-model="sentenceModel.classificationId"
                        clearable @change="classChange" :disabled="sentenceModel?.id !== null"
                    >
                        <el-option
                            v-for="item in classification"
                            :key="item.id"
                            :label="item.className"
                            :value="item.id"
                        />
                    </el-select>
                    <template v-for="(item,idx) in sentenceModel.taggings">
                        <el-row style="margin-top: 15px;width: 100%">
                            <el-col :span="4">{{ item.keyword }}</el-col>
                            <el-col :span="20">
                                <el-input v-model="item.tagging" autocomplete="off"/>
                            </el-col>
                        </el-row>
                    </template>
                </el-form-item>
            </el-form>
        </template>
        <template #table-search>

        </template>
    </Page>
</template>

<style lang="scss" scoped>

</style>
